<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link href="css/globle.css" rel="stylesheet">
		<link href="css/font.css" rel="stylesheet">
		<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/echarts-wordcloud.min.js"></script>
		<script src="js/anime.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/index.js"></script>
	</head>
	<style>
#tagsList {
	position: relative;
	top: -25px;
	width: 466px;
	height: 419px;
}
#tagsList a {
	position: absolute;
	top: 0px;
	left: 0px;
	font-family: Microsoft YaHei;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	padding: 3px 6px;
}

#tagsList a:hover {
	color: #FF0000;
	letter-spacing: 2px;
}
	</style>

	<body onload="showLeftTime()">
<canvas class="bgFlash" id="bgFlash"style="z-index: 0;"></canvas>
		<img src="img/logo.png" style="position:absolute;margin-top: 30px;left: 1638px;z-index: 10;" />
		<div style="width: 3370px;height: 800px;margin: 0 auto;display: flex;">
			<div id="bg">
				<img src="img/组 86.png" class="bg el" style="z-index: 2;" />
				<img src="img/bg_center.png" class="bg" style="opacity: 1;z-index: 1;" />
			</div>
			<div id="xian">
				<img src="img/矩形 1373.png" class="x1" style="left: 2824px;top: 424px;opacity: 0;" />
				<img src="img/矩形 1374.png" class="x2" style="left: 990px;top: 390px;opacity: 0;" />
				<img src="img/矩形 1375.png" class="x3" style="left: 854px;top: 386px;opacity: 0;" />
				<img src="img/矩形 1373.png" class="x4" style="left: 2451px;top: 399px;" />
				<img src="img/矩形 1374.png" class="x5" style="left: 2318px;top: 430px;" />
				<img src="img/矩形 1375.png" class="x6" style="left: 1225px;top: 412px;" />
				<img src="img/矩形 1373.png" class="x7" style="left: 930px;top: 404px;opacity: 0;" />
				<img src="img/矩形 1374.png" class="x8" style="left: 2838px;top: 403px;opacity: 0;" />
				<img src="img/矩形 1375.png" class="x9" style="left: 2750px;top: 383px;opacity: 0;" />
				<img src="img/矩形 1373.png" class="x10" style="left: 1251px;top: 380px;" />
				<img src="img/矩形 1374.png" class="x11" style="left: 1203px;top: 398px;" />
				<img src="img/矩形 1375.png" class="x12" style="left: 2451px;top: 416px;" />
			</div>
			<div class="left-box">
				<div class="left-n1" id="itemContainer2">
					<div class="bt">专席专区</div>
					<div class="tab-head">
						<div class="tab-head-n1">呼入总量</div>
						<div class="tab-head-n1">进队列量</div>
						<div class="tab-head-n2">接听量</div>
						<div class="tab-head-n2">接通率</div>
					</div>
					<div style="height: 10px;"><img src="img/xian.png" style="float: right;margin-right: 30px;" /></div>
				</div>
				<div class="left-n2">
					<div class="bt">热点问题</div>
					<div id="tagsList"></div>
					<!--<div id="ech_n_3" style="height: 90%"></div>-->

				</div>
				<div class="left-n3">
					<div class="bt" style="position: absolute; z-index: 1;">话务监控</div>
					<div class="hw-left">
						4<br />3<br />2<br />1<br />0
					</div>
					<p>单位：千</p>
					<div id="ech_n_4" style="height: 100%;"></div>
				</div>
			</div>
				<img src="img/pic.png"style="position: absolute;top: 250px;left: 1550px;z-index: 11;mix-blend-mode: screen; "/>
				<img src="img/pic.png"style="position: absolute;top: 530px;left: 2150px;z-index: 11;mix-blend-mode: screen; "/>
				<img src="img/pic.png"style="position: absolute;top: 465px;left: 2313px;z-index: 11;mix-blend-mode: screen; "/>
			<div class="center-box">
				<div class="bt">今日总呼入量<img src="img/上升.png" /></div>
				<div class="bt1" id="show">2018-06-20 15:00:30</div>
				<div id="dataNums"> </div>
				<div class="box" id="itemContainer">
				</div>
				<img class="img" src="img/文字.png" />
				<div class="list-n1">
					<div class="n1-item">
						<div class="n1-box">
							<canvas id="n1_1"></canvas>
						</div>
						<div class="n1-cap">人工接听占比</div>
					</div>
					<div class="n1-item" style="margin-top: 10px;">
						<div class="n1-box">
							<canvas id="n1_2"></canvas>
						</div>
						<div class="n51-cap">自动接听占比</div>
					</div>
				</div>
				<div class="list-n2" id="itemContainer1">
					<div id="ech_n_2" style="height: 100%;"></div>
				</div>
				<div class="jindu">
					<p>人工接听量</p>
					<p style="top: 95px;">自动接听量</p>
					<div id="ech_n_1" class="n_1"></div>
					<div class="num">
						<a>11220</a>
						<a>9372</a>
					</div>
				</div>
				<img src="img/地图.png" />
				<div class="container dian1">
					<div class="dot"></div>
					<div class="pulse" style="width: 90px;height: 90px;left: -50px;top: -50px;"></div>
					<div class="pulse2"></div>
					<div class="pulse3"></div>
					<div class="pulse4"></div>
					<div class="pulse5"></div>
				</div>
				<div class="container dian2">
					<div class="dot"></div>
					<div class="pulse"></div>
					<div class="pulse1"></div>
					<div class="pulse2"></div>
				</div>		
				<div class="container dian3">
					<div class="dot"></div>
					<div class="pulse"></div>
					<div class="pulse1"></div>
					<div class="pulse2"></div>
				</div>	
				<div class="container dian4">
					<div class="dot"></div>
					<div class="pulse"></div>
					<div class="pulse1"></div>
					<div class="pulse2"></div>
				</div>	
				<div class="container dian5">
					<div class="dot"></div>
					<div class="pulse"></div>
					<div class="pulse1"></div>
					<div class="pulse2"></div>
				</div>	
				<div class="container dian6">
					<div class="dot"></div>
					<div class="pulse"></div>
					<div class="pulse1"></div>
					<div class="pulse2"></div>
					<div class="pulse4"></div>
					<div class="pulse5"></div>
				</div>
			</div>
			<div class="right-box">
				<div class="right-n1">
					<div><img src="img/t1.png" />
						<p>
							<a>264</a><br />总座席数</p>
					</div>
					<div><img src="img/t2.png" />
						<p>
							<a>37</a><br />签到人数</p>
					</div>
					<div><img src="img/t3.png" />
						<p>
							<a>25</a><br />通话人数</p>
					</div>
					<div><img src="img/t4.png" />
						<p>
							<a>3</a><br />示忙人数</p>
					</div>
					<div><img src="img/t5.png" />
						<p>
							<a>10</a><br />整理人数</p>
					</div>
					<div><img src="img/t6.png" />
						<p>
							<a>2</a><br />排队人数</p>
					</div>
					<div><img src="img/t7.png" />
						<p>
							<a>8</a><br />空闲人数</p>
					</div>
					<div><img src="img/t8.png" />
						<p>
							<a>0</a><br />休息人数</p>
					</div>
				</div>
				<div class="right-n2">
					<div class="bt1">接听数量排名</div>
					<img src="img/jt-bg1.png" />
					<div class="box" id="itemContainer3">
					</div>
				</div>
				<div class="right-n3">
					<div class="bt1" style="margin-left: 15px;">接听时间排名</div>
					<img src="img/jt-bg2.png" />
					<div class="box">
						<div class="tab-body">
							<div class="tab-body-n1">#431</div>
							<div class="tab-body-n2">综合座席</div>
							<div class="tab-body-n3">56m</div>
						</div>
						<div class="tab-body">
							<div class="tab-body-n1">#498</div>
							<div class="tab-body-n2">综合座席</div>
							<div class="tab-body-n3">22m</div>
						</div>
						<div class="tab-body">
							<div class="tab-body-n1">#417</div>
							<div class="tab-body-n2">综合座席</div>
							<div class="tab-body-n3">20m</div>
						</div>
						<div class="tab-body">
							<div class="tab-body-n1">#9028</div>
							<div class="tab-body-n2">综合座席</div>
							<div class="tab-body-n3">12m</div>
						</div>
						<div class="tab-body">
							<div class="tab-body-n1">#484</div>
							<div class="tab-body-n2">综合座席</div>
							<div class="tab-body-n3">5m</div>
						</div>
					</div>
				</div>
				<div class="right-n4">
					<div class="bt" style="position: absolute;">趋势分析</div>
					<div class="qs-left">
						3<br />2.5<br />2<br />1.5<br />1<br />0.5<br />0
					</div>
					<p>单位：万</p>
					<div id="ech_n_5" style="height: 100%;"></div>
				</div>
			</div>
		</div>

<script type="text/javascript" src="js/tags.js"></script>
		<script>
			//实时数据
			$(document).ready(function() {
				$.get('ajax.json',
					function(result) {
						if(result) {
							var data = result.Data;
							var btn = data.totalHuru;
					var html = '';
					html +=	'<div class="p1">进队列量<p>'+data.inQuene+'</p></div><div class="p2">接听量<p>'+data.jieting+'</p></div><div class="p3">外呼量<p>'+data.outPhone+'</p></div><div class="p4">自助查询<p>'+data.zizhu+'</p></div><div class="p5">接通率<a>（人工+自动）</a><p>'+data.jietonglv+'%</p></div>';

					$(html).appendTo('#itemContainer');
						}
						$("#dataNums").rollNum({
							deVal: btn
						});
					});
//				setInterval(function() {
//					$(function() {
//						$.get('ajax.json',
//							function(result) {
//								if(result) {
//									var data = result.Data;
//									var btn = data.totalHuru;var html = '';
//					html +=	'<div class="p1">进队列量<p>'+data.inQuene+'</p></div><div class="p2">接听量<p>'+data.jieting+'</p></div><div class="p3">外呼量<p>'+data.outPhone+'</p></div><div class="p4">自助查询<p>'+data.zizhu+'</p></div><div class="p5">接通率<a>（人工+自动）</a><p>'+data.jietonglv+'%</p></div>';
//
//					$('#itemContainer').html(html);
//								}
//								$("#dataNums").rollNum({
//									deVal: btn
//								});
//							});
//					});
//				}, 30000);

			})	
			
			//词云
			
				$(document).ready(function() {
				$.ajax({
        url: "js/data.json",
        type: "get",
    dataType: "json",  
        success:
					function(result) {
						if(result) {
					var data = result.Data;
						var dl = data.length;
					var html = '';
						if(dl > 50) dl = 50;
					for(var i = 0; i < dl; i++) {
						if(data[i].Name.length<=6){
					html +=	
    '<a href="#/Article.aspx?kid='+i+'" title="'+data[i].Name+'">'+data[i].Name+'</a>' 
					;	
						}else{
					html +=	
    '<a href="#/Article.aspx?kid='+i+'" title="'+data[i].Name+'">'+data[i].Name.substring(0, 5)+'...</a>' 
					;	
						}
					}
					$(html).appendTo('#tagsList');
				}
					}
					});
			})
				
			
	
			//直接答复
				$(document).ready(function() {
				$.ajax({
        url: "js/data1.json",
        type: "get",
    dataType: "json",  
        success:
					function(result) {
						if(result) {
					var data = result.Data;
					var html = '';
					html +=	'<p>直接答复<br/><b>'+data.zhijieHuifu+'<a>件</a></b></p><p>网络交办<br/><b>'+data.wangluoJiaoban+'<a>件</a></b></p>';
					$(html).appendTo('#itemContainer1');
				}
					}
					});
			})
				
				
			//专席专区
				$(document).ready(function() {
				$.ajax({
        url: "复制 ajax.json",
        type: "get",
    dataType: "json",  
        success:
					function(result) {
						if(result) {
					var data = result.Data;
					var z = data.zuiduoPaoYici;
					var s = data.shebao;
					var j = data.jiaotong;
					var g = data.gongjijin;
					var si = data.sifa;
					var html = '';
					html +=	'<div class="tab-body" style="background: url(img/背景-1.png) no-repeat;background-size: 100% 100%;"><div class="tab-body-n0"></div><div class="tab-body-n1">'+z.totalHuru+'</div><div class="tab-body-n1">'+z.inQuene+'</div><div class="tab-body-n2">'+z.Jieting+'</div><div class="tab-body-n3">'+(z.Jieting/z.inQuene*100).toFixed(1)+'%</div></div><div class="tab-body" style="background: url(img/背景-2.png) no-repeat;background-size: 100% 100%;"><div class="tab-body-n0">12333</div><div class="tab-body-n1">'+s.totalHuru+'</div><div class="tab-body-n1">'+s.inQuene+'</div><div class="tab-body-n2">'+s.Jieting+'</div><div class="tab-body-n3">'+(s.Jieting/s.inQuene*100).toFixed(1)+'%</div></div><div class="tab-body" style="background: url(img/背景-3.png) no-repeat;background-size: 100% 100%;"><div class="tab-body-n0">12328</div><div class="tab-body-n1">'+j.totalHuru+'</div><div class="tab-body-n1">'+j.inQuene+'</div><div class="tab-body-n2">'+j.Jieting+'</div><div class="tab-body-n3">'+(j.Jieting/j.inQuene*100).toFixed(1)+'%</div></div><div class="tab-body" style="background: url(img/背景-4.png) no-repeat;background-size: 100% 100%;"><div class="tab-body-n0">12329</div><div class="tab-body-n1">'+g.totalHuru+'</div><div class="tab-body-n1">'+g.inQuene+'</div><div class="tab-body-n2">'+g.Jieting+'</div><div class="tab-body-n3">'+(g.Jieting/g.inQuene*100).toFixed(1)+'%</div></div><div class="tab-body" style="background: url(img/背景-5.png) no-repeat;background-size: 100% 100%;"><div class="tab-body-n0">12348</div><div class="tab-body-n1">'+si.totalHuru+'</div><div class="tab-body-n1">'+si.inQuene+'</div><div class="tab-body-n2">'+si.Jieting+'</div><div class="tab-body-n3">'+(si.Jieting/si.inQuene*100).toFixed(1)+'%</div></div>'

					;
					$(html).appendTo('#itemContainer2');
				}
					}
					});
			})
				
				//接听时间排名
								$(document).ready(function() {
				$.ajax({
        url: "复制(2)ajax.json",
        type: "get",
    dataType: "json",  
        success:
					function(result) {
						if(result) {
					var data = result.Data;
					var html = '';
					var Type = [];
					for(var i = 0; i < 5; i++) {
					    if(data[i].Type == "Shebao") {
							Type.push('人力社保座席')
						}
						else if(data[i].Type == "zuiduo") {
							Type.push('最多跑一次座席')
						}
						else if(data[i].Type == "zonghe") {
							Type.push('综合座席')
						}
					}
					for(var i = 0; i < data.length; i++) {
						html +=	'<div class="tab-body"><div class="tab-body-n1">#'+data[i].Zxgh+'</div><div class="tab-body-n2">'+Type[i]+'</div><div class="tab-body-n3">'+data[i].Total+'</div></div>'
					;
}
					$(html).appendTo('#itemContainer3');
				}
					}
					});
			})
				
			//人工接听占比
			var n5_1 = new Percentage($('#n1_1'), {
				color: 'rgba(255,255,255,.9)',
				fontSize: '40',
				num: 65
			});

			//自动接听占比
			var n5_2 = new Percentage($('#n1_2'), {
				color: 'rgba(255,255,255,.9)',
				fontSize: '40',
				num: 35
			});
			//时间
						var initializationTime=(new Date()).getTime();
function showLeftTime()
{
var now=new Date();
var year=now.getFullYear();
var month=now.getMonth()+1;
   if(month<10) month = '0' + month;
var day=now.getDate();
   if(day<10) day = '0' + day;
var hours=now.getHours();
   if(hours<10) hours = '0' + hours;
var minutes=now.getMinutes();
   if(minutes<10) minutes = '0' + minutes;
var seconds=now.getSeconds();
   if(seconds<10) seconds = '0' + seconds;
document.all.show.innerHTML=""+year+"-"+month+"-"+day+"  "+hours+":"+minutes+":"+seconds+"";
var timeID=setTimeout(showLeftTime,1000);
}


			var bg = anime({
				targets: '#bg .el',
				opacity: {
					value: 1,
					duration: 2000,
					easing: 'easeInOutQuad'
				},
				direction: 'alternate',
				loop: true
			});
			var xian = anime.timeline({
				duration: 2000,
				direction: 'alternate',
				loop: true
			});
			xian.add({
					targets: '#xian .x1',
					translateX: -500,
					offset: 0,
					opacity: 1,
					easing: 'linear'
				})
				.add({
					targets: '#xian .x2',
					translateX: 250,
					offset: 0,
					opacity: 1,
					easing: 'easeInQuad'
				})
				.add({
					targets: '#xian .x3',
					translateX: 500,
					offset: 0,
					opacity: 1,
					easing: 'easeInQuad'
				})
				.add({
					targets: '#xian .x4',
					translateX: 250,
					offset: 0,
					opacity: 0,
					easing: 'linear'
				})
				.add({
					targets: '#xian .x5',
					translateX: 500,
					offset: 0,
					opacity: 0,
					easing: 'easeInQuad'
				})
				.add({
					targets: '#xian .x6',
					translateX: -500,
					offset: 0,
					opacity: 0,
					easing: 'easeInQuad'
				})
				.add({
					targets: '#xian .x7',
					translateX: 500,
					offset: 0,
					opacity: 1,
					easing: 'linear'
				})
				.add({
					targets: '#xian .x8',
					translateX: -250,
					offset: 0,
					opacity: 1,
					easing: 'easeInQuad'
				})
				.add({
					targets: '#xian .x9',
					translateX: -500,
					offset: 0,
					opacity: 1,
					easing: 'easeInQuad'
				})
				.add({
					targets: '#xian .x10',
					translateX: -250,
					offset: 0,
					opacity: 0,
					easing: 'linear'
				})
				.add({
					targets: '#xian .x11',
					translateX: -250,
					offset: 0,
					opacity: 0,
					easing: 'easeInQuad'
				})
				.add({
					targets: '#xian .x12',
					translateX: 500,
					offset: 0,
					opacity: 0,
					easing: 'easeInQuad'
				})



			ech_n_1();
			ech_n_2();
//			ech_n_3();
			ech_n_4();
			ech_n_5();
		</script>
	</body>

</html>